<script setup lang="ts">
import {onMounted, ref, watch} from "vue";
import {useRouter} from "vue-router";

const router = useRouter();
const activeIndex = ref(router.currentRoute.value.path);

watch(
    () => router.currentRoute.value.path,
    (newPath) => {
      activeIndex.value = newPath;
    }
);
onMounted(() => {
  document.title = "时光记忆馆";
})
</script>

<template>
  <div class="topHeader">
    <div class="topLogo">
      <router-link to="/home">记忆时光馆</router-link>
    </div>
    <div class="topNav">
      <el-menu :default-active="activeIndex" router mode="horizontal" background-color="#97c5f3" text-color="#fff"
               active-text-color="aquamarine" popper-class="AppTopHeaderNavPopper" hide-timeout="100000000000000000000">
        <el-menu-item index="/home">
          <router-link to="/home">首页</router-link>
        </el-menu-item>
        <el-menu-item index="/myMemory">
          <router-link to="/myMemory">我的记忆</router-link>
        </el-menu-item>
        <el-menu-item index="/findMemory">
          <router-link to="/findMemory">寻找记忆</router-link>
        </el-menu-item>
        <el-menu-item index="/memoryInTune">
          <router-link to="/memoryInTune">记忆合拍</router-link>
        </el-menu-item>
        <el-menu-item index="/nostalgic">
          <router-link to="/nostalgic">怀旧</router-link>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="topPerson"></div>
  </div>
  <div class="mainContent">
    <router-view/>
  </div>
</template>

<style scoped lang="less">
.topHeader {
  width: 100%;
  display: flex;
  background-color: #97c5f3;
  justify-content: center;
  align-items: center;

  .topLogo {
    width: 25%;
    font-family: 楷体;
    font-size: 25px;
    text-align: center;
    min-width: 150px;
    color: aquamarine;

    a {
      color: aquamarine;
    }
  }

  .topNav {
    width: 50%;
    min-width: 400px;
  }


  .topPerson {
    width: 25%;
    min-width: 150px;
    color: aquamarine;
  }
}

.mainContent {
  background-color: antiquewhite;
  height: calc(100vh - 60px);
  width: 100%;
}

@media screen and (max-width: 899px) {
  .mainContent {
    height: calc(100vh - 75px);
  }
}

</style>
